<template>
  <view class="container page-with-cunba-nav">
    <!-- 顶部搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <text class="search-icon">🔍</text>
        <input 
          class="search-input" 
          placeholder="搜索球员姓名" 
          v-model="searchKeyword"
          @input="onSearchInput"
        />
        <text v-if="searchKeyword" class="clear-icon" @click="clearSearch">✕</text>
      </view>
    </view>

    <!-- 筛选标签 -->
    <view class="filter-tabs">
      <view 
        class="filter-tab" 
        :class="{ active: activeFilter === index }" 
        v-for="(filter, index) in filterList" 
        :key="index"
        @click="switchFilter(index)"
      >
        <text class="filter-text">{{ filter.name }}</text>
      </view>
    </view>

    <!-- 球员列表 -->
    <view class="player-list">
      <view 
        class="player-item" 
        v-for="(player, index) in filteredPlayers" 
        :key="index"
        @click="viewPlayerDetail(player)"
      >
        <view class="player-avatar">
          <image class="avatar-img" src="/static/images/mine.png" mode="aspectFill"></image>
        </view>
        
        <view class="player-info">
          <view class="player-name">{{ player.name }}</view>
          <view class="player-details">
            <text class="player-position">{{ player.position }}</text>
            <text class="player-team">{{ player.team }}</text>
          </view>
          <view class="player-stats">
            <text class="stat-item">得分: {{ player.points }}</text>
            <text class="stat-item">篮板: {{ player.rebounds }}</text>
            <text class="stat-item">助攻: {{ player.assists }}</text>
          </view>
        </view>
        
        <view class="player-number">
          <text class="number-text">#{{ player.number }}</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="filteredPlayers.length === 0" class="empty-state">
      <text class="empty-icon">🏀</text>
      <text class="empty-text">暂无球员数据</text>
      <text class="empty-hint">请尝试其他筛选条件</text>
    </view>

    <!-- 加载更多 -->
    <view v-if="hasMore && filteredPlayers.length > 0" class="load-more" @click="loadMore">
      <text class="load-text">{{ loading ? '加载中...' : '加载更多' }}</text>
    </view>
    
    <!-- 自定义导航栏 -->
    <cunba-nav-bar :activeIndex="2" @nav-change="onNavChange"></cunba-nav-bar>
  </view>
</template>

<script>
import CunbaNavBar from '@/components/cunba-nav-bar/index.vue'

export default {
  components: {
    CunbaNavBar
  },
  data() {
    return {
      searchKeyword: '',
      activeFilter: 0,
      loading: false,
      hasMore: true,
      filterList: [
        { name: '全部', value: 'all' },
        { name: '得分后卫', value: 'SG' },
        { name: '控球后卫', value: 'PG' },
        { name: '小前锋', value: 'SF' },
        { name: '大前锋', value: 'PF' },
        { name: '中锋', value: 'C' }
      ],
      playerList: [
        {
          id: 1,
          name: '谢伊-吉尔杰斯-亚历山大',
          nameEn: 'Shai Gilgeous-Alexander',
          position: '得分后卫',
          team: '雷霆队',
          number: '2',
          avatar: '/static/images/mine.png',
          points: 29.9,
          rebounds: 5.3,
          assists: 6.5,
          positionCode: 'SG'
        },
        {
          id: 2,
          name: '勒布朗-詹姆斯',
          nameEn: 'LeBron James',
          position: '小前锋',
          team: '湖人队',
          number: '23',
          avatar: '/static/images/mine.png',
          points: 25.8,
          rebounds: 7.2,
          assists: 8.1,
          positionCode: 'SF'
        },
        {
          id: 3,
          name: '斯蒂芬-库里',
          nameEn: 'Stephen Curry',
          position: '控球后卫',
          team: '勇士队',
          number: '30',
          avatar: '/static/images/mine.png',
          points: 27.5,
          rebounds: 4.9,
          assists: 9.1,
          positionCode: 'PG'
        },
        {
          id: 4,
          name: '凯文-杜兰特',
          nameEn: 'Kevin Durant',
          position: '小前锋',
          team: '太阳队',
          number: '35',
          avatar: '/static/images/mine.png',
          points: 26.8,
          rebounds: 6.7,
          assists: 5.0,
          positionCode: 'SF'
        },
        {
          id: 5,
          name: '扬尼斯-阿德托昆博',
          nameEn: 'Giannis Antetokounmpo',
          position: '大前锋',
          team: '雄鹿队',
          number: '34',
          avatar: '/static/images/mine.png',
          points: 31.1,
          rebounds: 11.8,
          assists: 5.7,
          positionCode: 'PF'
        },
        {
          id: 6,
          name: '尼古拉-约基奇',
          nameEn: 'Nikola Jokic',
          position: '中锋',
          team: '掘金队',
          number: '15',
          avatar: '/static/images/mine.png',
          points: 24.5,
          rebounds: 11.8,
          assists: 9.8,
          positionCode: 'C'
        }
      ]
    }
  },
  computed: {
    // 过滤后的球员列表
    filteredPlayers() {
      let players = this.playerList
      
      // 按位置筛选
      if (this.activeFilter > 0) {
        const filterValue = this.filterList[this.activeFilter].value
        players = players.filter(player => player.positionCode === filterValue)
      }
      
      // 按关键词搜索
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.trim().toLowerCase()
        players = players.filter(player => 
          player.name.toLowerCase().includes(keyword) ||
          player.nameEn.toLowerCase().includes(keyword) ||
          player.team.toLowerCase().includes(keyword)
        )
      }
      
      return players
    }
  },
  onLoad() {
    console.log('球员列表页面加载完成')
    this.initData()
  },
  methods: {
    // 初始化数据
    initData() {
      // 这里可以调用API获取球员数据
      console.log('初始化球员数据')
    },
    
    // 搜索输入
    onSearchInput(e) {
      this.searchKeyword = e.detail.value
    },
    
    // 清除搜索
    clearSearch() {
      this.searchKeyword = ''
    },
    
    // 切换筛选条件
    switchFilter(index) {
      this.activeFilter = index
    },
    
    // 查看球员详情
    viewPlayerDetail(player) {
      console.log('查看球员详情:', player)
      uni.navigateTo({
        url: `/pages/cunba/player_detail/index?playerId=${player.id}&playerName=${player.name}`
      })
    },
    
    // 加载更多
    loadMore() {
      if (this.loading) return
      
      this.loading = true
      
      // 模拟加载更多数据
      setTimeout(() => {
        this.loading = false
        // 这里可以添加更多球员数据
        // this.playerList.push(...newPlayers)
        
        // 模拟没有更多数据
        this.hasMore = false
        
        uni.showToast({
          title: '已加载全部球员',
          icon: 'success'
        })
      }, 1500)
    },
    
    // 下拉刷新
    onPullDownRefresh() {
      setTimeout(() => {
        this.initData()
        this.hasMore = true
        uni.stopPullDownRefresh()
      }, 1000)
    },
    
    // 上拉加载更多
    onReachBottom() {
      if (this.hasMore) {
        this.loadMore()
      }
    },
    
    // 自定义导航栏切换事件
    onNavChange(navData) {
      console.log('导航栏切换:', navData)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 搜索区域 */
.search-section {
  background: #fff;
  padding: 15px 20px;
  border-bottom: 1px solid #e0e0e0;
  
  .search-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 20px;
    padding: 8px 15px;
    
    .search-icon {
      font-size: 16px;
      color: #999;
      margin-right: 8px;
    }
    
    .search-input {
      flex: 1;
      font-size: 16px;
      color: #333;
      background: transparent;
      border: none;
      outline: none;
    }
    
    .clear-icon {
      font-size: 16px;
      color: #999;
      cursor: pointer;
      padding: 2px;
    }
  }
}

/* 筛选标签 */
.filter-tabs {
  display: flex;
  background: #fff;
  padding: 10px 20px;
  border-bottom: 1px solid #e0e0e0;
  overflow-x: auto;
  
  .filter-tab {
    flex-shrink: 0;
    padding: 8px 16px;
    margin-right: 10px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.3s;
    
    &.active {
      background: #4A90E2;
      border-color: #4A90E2;
      
      .filter-text {
        color: #fff;
      }
    }
    
    .filter-text {
      font-size: 14px;
      color: #666;
      white-space: nowrap;
    }
  }
}

/* 球员列表 */
.player-list {
  padding: 10px 0;
  
  .player-item {
    display: flex;
    align-items: center;
    background: #fff;
    margin: 10px 20px;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s;
    
    &:active {
      transform: scale(0.98);
    }
    
    .player-avatar {
      width: 60px;
      height: 60px;
      margin-right: 15px;
      
      .avatar-img {
        width: 100%;
        height: 100%;
        border-radius: 30px;
        background: #f0f0f0;
      }
    }
    
    .player-info {
      flex: 1;
      
      .player-name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
      }
      
      .player-details {
        display: flex;
        margin-bottom: 8px;
        
        .player-position {
          font-size: 14px;
          color: #4A90E2;
          margin-right: 10px;
        }
        
        .player-team {
          font-size: 14px;
          color: #666;
        }
      }
      
      .player-stats {
        display: flex;
        
        .stat-item {
          font-size: 12px;
          color: #999;
          margin-right: 15px;
        }
      }
    }
    
    .player-number {
      .number-text {
        font-size: 24px;
        font-weight: bold;
        color: #4A90E2;
      }
    }
  }
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  
  .empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
  }
  
  .empty-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 5px;
  }
  
  .empty-hint {
    font-size: 14px;
    color: #999;
  }
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 20px;
  
  .load-text {
    font-size: 16px;
    color: #4A90E2;
  }
}

/* 页面容器样式 */
.page-with-cunba-nav {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* 禁用页面过渡动画 */
// #ifdef H5
.uni-page {
  transition: none !important;
  animation: none !important;
}
// #endif
</style>




